<template>
  <div class="userInfoChidlrenPageTitle">
    <span>
      {{ data.name }}
      <span class="courseName" v-if="showCourseName">
        <span class="line">——</span>
        <span>{{ courseName }}</span>
      </span>
    </span>
    <div class="problem" @click="help" v-if="data.showProblem">
      <i class="iconfont iconqm" />
      常见问题
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Object,
    showCourseName: Boolean,
  },
  computed: {
    courseName() {
      const chooseCourses = this.$store.state.courses.chooseCourses;
      const { currNo } = this.$route.query;
      const findCourse = chooseCourses.find((item) => item.currNo == currNo);
      if (findCourse) return findCourse.name;
      return "";
    },
  },
  methods: {
    help() {
      this.$router.push({ name: "Help" });
    },
  },
};
</script>

<style lang="stylus" scoped>
.userInfoChidlrenPageTitle {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Segoe UI;
  font-size: 22px;
  color: #666;

  .courseName {
    .line {
      margin: 0 5px;
    }
  }

  .problem {
    cursor: pointer;
    position: relative;
    margin-top: 18px;
    font-family: Segoe UI;
    font-size: 14px;
    color: #b0b0b0;

    i {
      font-size: 15px;
    }
  }
}
</style>